<template>
	<view class="block-bg" :class="{'shadow': showShadow}" :style="{
		borderRadius: borderRadius+'px', marginBottom: marginTop+'px', paddingTop: paddingTop+'px', paddingBottom:paddingTop+'px',
		background: bgColor, paddingLeft: paddingLeft+'px', paddingRight: paddingLeft+'px'}" @click="$emit('click')">
		<slot></slot>
	</view>
</template>

<script> 
	export default {
		name: 'BlockView',
		props: {
			showShadow: {
				type: Boolean,
				default: false
			},
			borderRadius: {
				type: [String,Number],
				default: '15'
			},
			bgColor: {
				type: String,
				default: '#fff'
			},
			marginTop: {
				type: [String,Number],
				default: '12'
			},
			paddingTop: {
				type: [String,Number],
				default: '15'
			},
			paddingLeft: {
				type: [String,Number],
				default: '15'
			},
		},
		emits: ['click'],
		data() {
			return {
				
			}
		},
    computed: {
      
    },
		methods: {
			
		}
	}
</script>

<style scoped lang="scss">
	.block-bg{
		box-sizing: border-box;
		overflow: hidden;
		// z-index: 10;
    position: relative;
	}
	.shadow{
		box-shadow: 0 4px 16px 0 #D2D2D2;
	}
</style>